<template>
  <div class="mv-container">
    <div class="mv-wrap">
      <h3 class="title">mv详情</h3>
      <!-- mv -->
      <div class="video-wrap">
        <video
          controls
          :src="mvurl"
        ></video>
      </div>
      <!-- mv信息 -->
      <div class="info-wrap">
        <div class="singer-info">
          <div class="avatar-wrap">
            <img src="../assets/avatar.jpg" alt="" />
          </div>
          <span class="name">TF Boys</span>
        </div>
        <div class="mv-info">
          <h2 class="title">TF BOYS LIVE 秀 王源《淘汰》</h2>
          <span class="date">发布：2014-11-04</span>
          <span class="number">播放：94526次</span>
          <p class="desc">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            Consequuntur saepe aut officia itaque exercitationem culpa facere
            doloremque voluptates id non nam, aliquid ipsum laborum odit
            accusantium dolorem eligendi veniam dolore ea aperiam labore
            cupiditate et a. Necessitatibus eaque blanditiis possimus nobis
            ullam reprehenderit animi, vero reiciendis eos, deleniti commodi,
            consequatur dolorem iusto. Assumenda doloribus soluta temporibus ut
            dolorum corporis quos! Quisquam consectetur dolore iste quo
            praesentium dolorum excepturi, at sapiente pariatur quis! Neque ex
            cum, nobis aspernatur temporibus, voluptates at obcaecati dolore est
            repudiandae, veniam laborum fuga corrupti illum ut. Ad a tempore
            sint adipisci vero, delectus ducimus debitis molestias!
          </p>
        </div>
      </div>
      <!-- 精彩评论 -->
      <div class="comment-wrap">
        <p class="title">精彩评论<span class="number">(666)</span></p>
        <div class="comments-wrap">
          <div class="item">
            <div class="icon-wrap">
              <img src="../assets/avatar.jpg" alt="" />
            </div>
            <div class="content-wrap">
              <div class="content">
                <span class="name">爱斯基摩：</span>
                <span class="comment">谁说的，长大了依旧可爱哈</span>
              </div>
              <div class="re-content">
                <span class="name">小苹果：</span>
                <span class="comment">还是小时候比较可爱</span>
              </div>
              <div class="date">2020-02-12 17:26:11</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 最新评论 -->
      <div class="comment-wrap">
        <p class="title">最新评论<span class="number">(666)</span></p>
        <div class="comments-wrap">
          <div class="item">
            <div class="icon-wrap">
              <img src="../assets/avatar.jpg" alt="" />
            </div>
            <div class="content-wrap">
              <div class="content">
                <span class="name">爱斯基摩：</span>
                <span class="comment">谁说的，长大了依旧可爱哈</span>
              </div>
              <div class="re-content">
                <span class="name">小苹果：</span>
                <span class="comment">还是小时候比较可爱</span>
              </div>
              <div class="date">2020-02-12 17:26:11</div>
            </div>
          </div>
          <div class="item">
            <div class="icon-wrap">
              <img src="../assets/avatar.jpg" alt="" />
            </div>
            <div class="content-wrap">
              <div class="content">
                <span class="name">爱斯基摩：</span>
                <span class="comment">谁说的，长大了依旧可爱哈</span>
              </div>
              <div class="re-content">
                <span class="name">小苹果：</span>
                <span class="comment">还是小时候比较可爱</span>
              </div>
              <div class="date">2020-02-12 17:26:11</div>
            </div>
          </div>
          <div class="item">
            <div class="icon-wrap">
              <img src="../assets/avatar.jpg" alt="" />
            </div>
            <div class="content-wrap">
              <div class="content">
                <span class="name">爱斯基摩：</span>
                <span class="comment">谁说的，长大了依旧可爱哈</span>
              </div>
              <div class="re-content">
                <span class="name">小苹果：</span>
                <span class="comment">还是小时候比较可爱</span>
              </div>
              <div class="date">2020-02-12 17:26:11</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页器 -->
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size="5"
        :limit="limit"
      >
      </el-pagination>
    </div>
    <div class="mv-recommend">
      <h3 class="title">相关推荐</h3>
      <div class="mvs">
        <div class="items">
          <div class="item">
            <div class="img-wrap">
              <img :src="mvurl" alt="" />
              <span class="iconfont icon-play"></span>
              <div class="num-wrap">
                <div class="iconfont icon-play"></div>
                <div class="num">9912</div>
              </div>
              <span class="time">02:43</span>
            </div>
            <div class="info-wrap">
              <div class="name">HEYNA</div>
              <div class="singer">余恩</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: 'mv',
  data() {
    return {
      mvurl:[],
      // 总条数
      total: 20,
      // 页码
      page: 1,
      // 页容量
      limit: 10
    };
  },
  created(){
    axios({
      url:"https://autumnfish.cn/mv/url",
      params:{
        id:this.$route.query.q
      }
    }).then(res=>{
      console.log(res);
      
      this.mvurl=res.data.data.url
      console.log(this.mvurl);
      
    })
  },
  methods: {
   handleCurrentChange(val) {
      //保存页码
      this.page=val
      //重新获取数据
       axios({
      url: "https://autumnfish.cn/comment/playlist",
      params: {
        id: this.$route.query.q,
        limit: 10,
        offset:(this.page-1)*10
      }
    }).then(res => {
      this.total = res.data.total;
    });
      console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style></style>
